<template>
  <!-- 回到首页 -->
  <div style="margin: 0.8rem">
    <a href="/">返回首页</a>
    <br />
    <h1>作业——新闻(新接口)</h1>
  </div>

  <!-- 新闻页面部分 -->
  <div>
    <!-- 上部分:页头 -->
    <div class="page_header">
      <!-- 左边：logo order选项 -->
      <div>
        <div>
          <img src="../../../public/images/newslogo.png" alt="" />
        </div>
        <!-- 标签页：order -->
        <div>
          <el-tabs v-model="searchData.order" @tab-click="handleClick">
            <el-tab-pane value="1" label="最新" name="first"></el-tab-pane>
            <el-tab-pane value="2" label="高赞" name="second"></el-tab-pane>
            <el-tab-pane value="3" label="热门" name="third"></el-tab-pane>
            <el-tab-pane value="4" label="热评" name="fourth"></el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!-- 右边：搜索框  记录：浏览、点赞 消息 发布作品 登录-->
      <div>
        <!-- 搜索框 -->
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="searchData.title">
                <template #append>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 记录 -->
        <div>
          <el-icon><Clock /></el-icon>
        </div>
        <!-- 消息 -->
        <div>
          <el-icon><ChatDotRound /></el-icon>
        </div>
        <!-- 发布作品 -->
        <div>
          <el-icon><CirclePlus /></el-icon>
        </div>
        <!-- 登录 -->
        <div>
          <el-button type="danger">登录</el-button>
        </div>
      </div>
    </div>

    <!-- 下部分 -->
    <div class="page_body">
      <!-- 左：新闻卡片 -->
      <div>
        <ul
          v-infinite-scroll="addNews"
          class="infinite-list"
          style="overflow: auto"
        >
          <li v-for="d in newsList" :key="d.id" class="list">
            <div>
              <!-- 没有图片 -->
              <div v-if="d.imgs.length == 0" class="list-1">
                <div>{{ d.title }}</div>
              </div>
              <!-- 图片数量小于3张-用第一张图片 -->
              <div v-else-if="d.imgs.length < 3" class="list-2">
                <div>
                  <div @click="showNewsInfo(d.id)">{{ d.title }}</div>
                  <div>
                    <span>{{ d.source }}</span>
                    <span>{{ d.comments }}评论</span>
                    <span>{{ d.postTime }}</span>
                  </div>
                </div>
                <div>
                  <img @click="showNewsInfo(d.id)" :src="d.imgs[0]" alt="" />
                </div>
              </div>
              <!-- 图片数量大于3张-用三张图片  -->
              <div v-else class="list-3">
                <div @click="showNewsInfo(d.id)">{{ d.title }}</div>
                <div>
                  <div>
                    <img @click="showNewsInfo(d.id)" :src="d.imgs[0]" alt="" />
                  </div>
                  <div>
                    <img @click="showNewsInfo(d.id)" :src="d.imgs[1]" alt="" />
                  </div>
                  <div>
                    <img @click="showNewsInfo(d.id)" :src="d.imgs[2]" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- 右：热搜榜 -->
      <div></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { application } from '../../js/application'
import { useRouter } from 'vue-router'
import { tools } from '../../js/tools'
import { ElMessageBox, ElMessage } from 'element-plus'

const activeName = ref('first')
const router = useRouter()
const loading = ref(false)

// 分页数据
const getPageBean = ref({
  pageSize: 15,
  pageNumber: 1,
})
// 搜索数据
const searchData = ref({
  title: '',
  order: '1',
})
// 新闻列表
const newsList = ref([])
const addNews = () => {
  getPageBean.value.pageSize += 2
}
// 跳转详情页
const sendToDetails = id => {
  router.push({
    path: '/crud/WorkNewNewsinfo',
    query: { id: id },
  })
}

// 获取新闻列表
const getNewsList = () => {
  application.get(
    `/autodata/query/news/${getPageBean.value.pageSize}/${getPageBean.value.pageNumber}/${searchData.value.order}`,
    tools.mergeJson(searchData.value, getPageBean.value),
    data => {
      if (data.success) {
        newsList.value = data.data.list
        newsList.value.forEach(item => {
          item.imgs = item.imgs.split(',')
        })
        getPageBean.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '新闻')
    },
  )
}
getNewsList()
</script>

<style scoped lang="scss">
/* 头部的样式 */
.page_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em;
  height: 3em;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: #fafafa;
}
.page_header img:hover {
  cursor: pointer;
}
.page_header > div > div {
  display: flex;
  align-items: center;
  margin-right: 1em;
}

/* 头部左边的样式 */
.page_header > div:first-of-type {
  display: flex;
  align-items: center;
  height: 100%;
}
.page_header > div:first-of-type img {
  height: 2em;
  width: auto;
  margin: 0.5em;
  margin-right: 1.5em;
}
/* tabs组件的修改 */
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__item {
  --el-font-size-base: 1.1em;
  --el-text-color-primary: #000;
  --el-tabs-header-height: 35px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
}
::v-deep .el-tabs__active-bar {
  background-color: #fa3838;
}
::v-deep .el-tabs__item:hover {
  color: #999;
}
::v-deep .el-tabs__item.is-active {
  color: #fa3838;
}

/* 头部右边的样式 */
.page_header > div:last-of-type {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
/* 更改搜索框的边框颜色 */
.el-input {
  --el-input-focus-border-color: #f0f0f0;
  --el-input-border-color: #f0f0f0;
  --el-input-hover-border-color: none;
  --el-input-bg-color: #f0f0f0;
  --el-fill-color-blank: #f0f0f0;
}
.el-form-item {
  margin-bottom: 0;
}
i.el-icon {
  cursor: pointer;
  width: 1.8em;
  height: 1.8em;
}
svg {
  width: 1.8em;
  height: 1.8em;
}
/* i.el-icon:hover {
  color: #999;
} */
::v-deep .el-input-group__append {
  --el-color-info: #fa3838;
  --el-fill-color-light: #f0f0f0;
}

/* body的样式 */
.page_body {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin-top: 3em;
}
.page_body > div:first-of-type {
  width: 67%;
  /* background-color: #000; */
}
.page_body > div:last-of-type {
  width: 32%;
}
.page_body img {
  max-width: 100%;
  min-height: 100%;
}
.page_body img:hover {
  cursor: pointer;
  transform: scale(1.02);
  transition: all 0.2s;
}
.infinite-list {
  padding: 0px;
  margin: 0px;
}
.list {
  width: 100%;
  /* background-color: #3a3a3a; */
  list-style: none;
  margin: 2em 0;
}
.list-2 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0.1em;
}
.list-2 > div:first-of-type {
  display: flex;
  flex-direction: column;
}
.list-2 > div:first-of-type > div:first-of-type:hover {
  color: #fa3838;
  cursor: pointer;
}
.list-2 > div:first-of-type > div:last-of-type {
  font-size: 0.8em;
  color: #999;
  vertical-align: bottom;
}
.list-2 > div:last-of-type {
  width: 33%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
}
.list-3 {
  padding: 0.1em;
}
.list-3 > div:first-of-type {
  font-size: 1.1em;
}
.list-3 > div:first-of-type:hover {
  cursor: pointer;
  color: #fa3838;
  transition: all 0.2s;
}
.list-3 > div:last-of-type {
  display: flex;
  justify-content: space-between;
}
.list-3 > div:last-of-type > div {
  width: 33%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 0.5em;
}
/* 新闻卡片的样式 */
</style>
